<!-- 文章列表 -->
<template>
  <div>
    <wbc-nav></wbc-nav>
    <div class="container">
      <el-row :gutter="30">
        <el-col
          :sm="24"
          :md="16"
          style="transition: all 0.5s ease-out; margin-bottom: 30px"
        >
          <el-row class="sharelistBox">
            <el-col :span="24" class="s-item tcommonBox">
              <el-button
                type="primary"
                round
                style="position: absolute; right: 5px; top: 5px"
                v-if="show"
                @click="delete_o_Write"
                >删除文章</el-button
              >
              <div class="mymarkdown-body" v-html="compiledMarkdown"></div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :sm="24" :md="8">
          <wbc-rightlist></wbc-rightlist>
        </el-col>
      </el-row>
    </div>
    <wbc-footer></wbc-footer>
  </div>
</template>

<script>
import header from "../components/header.vue";
import footer from "../components/footer.vue";
import temSharelist from "../components/temSharelist.vue";
import temRightlist from "../components/temRightlist.vue";
import hljs from "highlight.js"; //引用
import "highlight.js/styles/monokai-sublime.css"; // 引入高亮样式 这里我用的是sublime样式
import { reqGet_o_Inf, delete_o_Write } from "../utils/server";
import { marked } from "marked";
marked.setOptions({
  gfm: true, //允许Git Hub标准的markdown.
  tables: true, //允许支持表格语法。该选项要求 gfm 为true
  breaks: true, //允许回车换行。该选项要求 gfm 为true。
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  },
});

export default {
  name: "Share",
  data() {
    //选项 / 数据
    return {
      value: "",
      show:''
    };
  },
  mounted() {
    let info = {
      id: this.$route.query.classId,
    };
    reqGet_o_Inf(info, (msg) => {
      this.value = msg.data[0].value;
    });
    this.$bus.$on("upload", this.upload);
    this.show = localStorage.getItem('show') == 'true'
  },
  computed: {
    compiledMarkdown: function () {
      return marked(this.value);
    },
  },
  methods: {
    //事件处理器
    upload(data) {
      let info = {
        id: data,
      };
      reqGet_o_Inf(info, (msg) => {
        this.value = msg.data[0].value;
      });
    },
    delete_o_Write() {
      let info = {
        id: this.$route.query.classId,
      };
      delete_o_Write(info, (msg) => {
        if (msg.code == 200) {
          this.$message({
            message: "删除文章成功",
            type: "success",
          });
          this.$router.push({
            path: "/WriteMd",
          });
        } else {
          this.$message({
            message: "删除文章失败",
            type: "warning",
          });
        }
      });
    },
  },
  components: {
    //定义组件
    "wbc-nav": header,
    "wbc-sharelist": temSharelist,
    "wbc-rightlist": temRightlist,
    "wbc-footer": footer,
  },

  created() {
    //生命周期函数
  },
};
</script>

<style scoped>
.tcommonBox {
  height: 700px !important;
  overflow: auto;
}
</style>
